
<template>
  <div class="World">
    <div id="map" class="Map" />
    <div class="Tabs col">项目数据大屏</div>
    <div class="part left">
      <dv-border-box-6 class="datav-card">
        <pie
          :height="230"
          :color="[
            '#28c76f',
            '#7AC9FD',
            '#fcad7b',
            '#fcf67b',
            '#28c111',
            '#7AC121',
            '#fc2112',
            '#ccf67b'
          ]"
          :chartData="persons"
        />
      </dv-border-box-6>
      <dv-border-box-6 class="datav-card">
        <waterball :height="230" :chartData="number" />
      </dv-border-box-6>
      <dv-border-box-6 class="datav-card">
        <curLine :height="230" :chartData="incomes" />
      </dv-border-box-6>
    </div>
    <div class="bottom-weather flex middle">
      <div class="weather-box" v-for="(item, index) in weathers" :key="index">
        <div class="weather-day">{{ item.date }}</div>
        <img :src="item.imgSrc" alt="" class="ico" />
        <div class="temper">{{ item.tem2 }} ~ {{ item.tem1 }}℃</div>
        <div class="wind">{{ item.wind }}</div>
      </div>
    </div>
    <div class="part right">
      <dv-border-box-6 class="datav-card">
        <horizontalBar :height="230" :chartData="business" />
      </dv-border-box-6>
      <dv-border-box-6 class="datav-card">
        <pictorialBar :height="230" :chartData="pictocials" />
      </dv-border-box-6>
      <dv-border-box-6 class="datav-card">
        <doubleLine :height="230" :chartData="doubleData" />
      </dv-border-box-6>
    </div>
  </div>
</template>

<script>
import pie from './components/pie'
import waterball from './components/waterball'
import curLine from './components/curLine'
import horizontalBar from './components/horizontalBar'
import pictorialBar from './components/pictorialBar'
import doubleLine from './components/doubleLine'
export default {
  data() {
    return {
      config: {
        zoom: 16,
        center: [118.04815, 24.61286],
        viewMode: '3D',
        pitch: 65,
        // mapStyle: 'amap://styles/0f4d1c3879734a19bc85eef56b6fa404'
        mapStyle: 'amap://styles/3fa26a8e29115d6911a86196a04df3f2'
      },
      points: [],
      map: null,
      infoWindow: null,
      persons: [
        {
          name: '博士',
          value: 5
        },
        {
          name: '硕士',
          value: 10
        },
        {
          name: '本科',
          value: 10
        },
        {
          name: '专科',
          value: 10
        },
        {
          name: '国防科大',
          value: 5
        },
        {
          name: '大厂专家',
          value: 5
        }
      ],
      number: [0.3],
      incomes: {
        legend: '',
        x: [['2015', '2016', '2017', '2018', '2019', '2020']],
        y: [[555, 896, 1935, 2922, 4508, 5000]]
      },
      business: {
        legend: '',
        x: [[1500, 1200, 900, 600, 400, 300, 100]],
        y: [
          [
            '金融行业',
            '电子政务',
            '文创版权',
            '教育行业',
            '智慧停车',
            '医疗互联',
            '物流行业'
          ]
        ]
      },
      pictocials: {
        x: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行'],
        y: [123, 60, 25, 18, 12, 9, 2, 1]
      },
      doubleData: {
        legend: ['q11', '312'],
        x: ['1号', '2号', '3号', '4号', '5号'],
        y: [[10, 40, 10, 40, 10], [110, 210, 12, 21, 110]]
      },
      weathers: []
    }
  },

  components: {
    pie,
    waterball,
    curLine,
    horizontalBar,
    pictorialBar,
    doubleLine
  },

  computed: {},
  mounted() {
    this.initMap()
  },
  created() {
    this.queryTemp()
  },

  methods: {
    initMap: function() {
      // 创建 实例 配置参数
      this.map = new AMap.Map('map', this.config)
      AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
        window.SimpleInfoWindow = SimpleInfoWindow
      })
      this.map.on('click', () => {
        this.infoWindow && this.infoWindow.close()
      })
      this.drawPoint()
    },
    queryTemp() {
      axios
        .get('https://www.tianqiapi.com/api/', {
          params: {
            appid: '26148275',
            appsecret: '2id6H48Y',
            version: 'v9'
          }
        })
        .then(res => {
          console.log(res)
          this.weathers = this.dealData(res.data.data)
        })
    },
    drawPoint() {
      // 先清理地图
      let res = [
        [118.067033, 24.616293],
        [118.04815, 24.611319],
        [118.049454, 24.611065],
        [118.046568, 24.611275]
      ]
      var markers = []
      // 循环数据 添加标注
      for (var i = 0; i < res.length; i++) {
        var marker = new AMap.Marker({
          map: this.map,
          position: [res[i][0], res[i][1]],
          content: `<div class="Human online"><div class="bubble">人员${i}</div></div>`,
          offset: new AMap.Pixel(-10, -40),
          width: 20,
          extData: res[i]
        })
        // 信息弹窗
        marker.on('click', e => {
          let ext = e.target.getExtData()
          let content = `<div><p>工号：111</p><p>职位：前端开发</p><p>年限：三年</p><p>性别：男</p>
          <p>当前位置：厦门软件园三期</p></div>`
          this.infoWindow = new SimpleInfoWindow({
            infoTitle: '人员位置',
            infoBody: content,
            offset: new AMap.Pixel(0, -30)
          })
          this.infoWindow.open(this.map, new AMap.LngLat(ext[0], ext[1]))
        })
        markers.push(marker)
      }
      this.points = markers
      this.map.add(this.points)
      this.map.setFitView()
    },
    dealData(data) {
      return data.map(e => {
        let { air_level, date, wea_img, win, tem1, tem2 } = e
        return {
          air_level,
          date,
          imgSrc: this.selectPic(wea_img),
          wind: win.join('-'),
          tem1,
          tem2
        }
      })
    },
    selectPic(type) {
      const typeMap = {
        xue: require('../assets/img/brand/xue.png'),
        yin: require('../assets/img/brand/yin.png'),
        yu: require('../assets/img/brand/yu.png'),
        bingbao: require('../assets/img/brand/yu.png'),
        yun: require('../assets/img/brand/yun.png'),
        wu: require('../assets/img/brand/wu.png'),
        shachen: require('../assets/img/brand/shachen.png'),
        lei: require('../assets/img/brand/lei.png'),
        qing: require('../assets/img/brand/qing.png')
      }
      return typeMap[type]
    }
  }
}
</script>
<style lang='scss' scoped>
.World {
  font-family: 'din';
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.Map {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.Tabs {
  position: absolute;
  top: -16px;
  left: 50%;
  padding: 20px 80px 8px;
  transform: translateX(-50%);
  border-radius: 18px;
  display: flex;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 4px;
  font-style: italic;
  color: #fff;
  background-color: #28c76f;
  cursor: pointer;
}
.part {
  position: absolute;
  top: 0;
  padding: 80px 20px 0;
  box-sizing: border-box;
  width: 400px;
  height: 100%;
  &.left {
    left: 0;
    background-image: linear-gradient(
      90deg,
      #060606 75%,
      rgba(16, 22, 30, 0.3) 100%
    );
    background-size: cover;
  }
  &.right {
    right: 0;
    background-image: linear-gradient(
      90deg,
      #060606 75%,
      rgba(16, 22, 30, 0.3) 100%
    );
    background-size: cover;
  }
}
.main {
  padding: 80px 20px 10px;
  min-height: calc(100% - 90px);
}
.datav-card {
  position: relative;
  height: 260px;
  padding: 10px 20px 0;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.bottom-weather {
  position: absolute;
  bottom: 20px;
  left: 500px;
  color: #fff;
  text-align: center;
}
.weather-box {
  padding: 10px 20px;
}
.weather-day,
.temper,
.wind {
  font-size: 14px;
  margin-bottom: 4px;
}
.ico {
  display: block;
  margin: 6px auto;
  width: 36px;
  height: 36px;
}
</style>